let data = {

    panel: {
        width: $('#panel')[0].offsetWidth,
        height: parseInt($('#panel').css('height')),
        x: $('#panel').offset().left,
        y: $('#panel').offset().top
    },

    dog: {
        width: $('#dog')[0].scrollWidth,
        height: $('#dog')[0].scrollHeight,
        x: 2,
        y: 2,
        class: '',
        step: {
            x: 2,
            y: 2
        },
        与狐狸的距离: 0,
        抓捕成功: false,
        抓捕时间: 0,
        抓捕时间平均值: 0,
        logs: []
    },

    fox: {
        width: $('#fox')[0].scrollWidth,
        height: $('#fox')[0].scrollHeight,
        x: 2,
        y: 100,
        class: ''
    },

    btn_play_again: {
        class: ''
    }
}

let vm = new Vue({
    el: '#app',
    data: data,
    computed: {},
    methods: {

        // 抓捕
        move_dog() {

            if (this.dog.抓捕成功) return

            this.dog.x += this.dog.step.x
            this.dog.y += this.dog.step.y

            this.dog.抓捕时间 = Math.round((this.dog.抓捕时间 + 0.1) * 10) / 10

        },

        // 高兴
        bounce_dog() {

            if (this.dog.抓捕成功) {
                this.dog.class = this.dog.class ? '' : 'animated bounce'
                this.btn_play_again.class = this.btn_play_again.class ? '' : 'animated swing delay-1s'
            }
        },

        // 得瑟
        jello_fox() {

            if (this.dog.抓捕成功) return

            this.fox.class = this.fox.class === 'animated jello' ? '' : 'animated jello'

            this.random_fox()

        },

        // 狐狸随机位置
        random_fox(x, y) {

            if (x) {
                this.fox.x = x
                this.fox.y = this.dog.y
                return
            }

            // x
            let pw = this.panel.width // 面板宽
            this.fox.x = Math.ceil(Math.random() * pw / 2)

            // y
            let ph = this.panel.height // 面板高

            let ry = Math.ceil(Math.random() * ph)
            let max_y = ph - this.fox.height

            this.fox.y = (ry > max_y) ? max_y : ry
        },

        // 改变运动方向
        change_dog_direct(k) {

            if (k === 37 && this.dog.step.x > 0 || k === 39 && this.dog.step.x < 0) {
                this.dog.step.x = -this.dog.step.x
            }
            if (k === 38 && this.dog.step.y > 0 || k === 40 && this.dog.step.y < 0) {
                this.dog.step.y = -this.dog.step.y
            }
        },

        // 改变运动方向 - 键盘
        change_dog_direct_keyboard(event) {
            this.change_dog_direct(event.keyCode)
        },

        // 再玩一次
        play_again() {

            if (!this.dog.抓捕成功) return

            this.dog.抓捕成功 = false
            this.dog.抓捕时间 = 0

            this.random_fox(
                (this.dog.x + this.panel.width / 2) % this.panel.width
            )
        }
    },

    mounted: function() {

        this.timer1 = setInterval(this.move_dog, 100);
        this.timer2 = setInterval(this.bounce_dog, 2000);
        this.timer3 = setInterval(this.jello_fox, 1000);

        window.addEventListener('keyup', this.change_dog_direct_keyboard)

    },

    watch: {

        'dog.x': function(newVal, oldVal) {

            this.dog.与狐狸的距离 = getDistanceBetweenTwoPoints(
                this.dog.x,
                this.dog.y,
                this.fox.x,
                this.fox.y
            )

            // 超出左右边界，反向运动
            let x = this.dog.x
            let w = this.panel.width

            if (x <= 0 || x >= (w - this.dog.width)) {
                this.dog.step.x = -this.dog.step.x
            }
        },
        'dog.y': function(val) {

            // 超出上下边界，反向运动
            let y = this.dog.y
            let h = this.panel.height

            if (y <= 0 || y >= (h - this.dog.height)) {
                this.dog.step.y = -this.dog.step.y
            }
        },

        'dog.与狐狸的距离': function(val) {

            let min_d = this.dog.width / 2 + this.fox.width / 2
            if (val < min_d) {
                this.dog.抓捕成功 = true
                this.dog.logs.push(this.dog.抓捕时间)
            }
        },

        'dog.抓捕成功': function(val) {

            if (val) {
                this.fox.class = 'animated rotateOut delay-2s'
            } else {
                this.fox.class = ''
                this.dog.class = ''
            }
        },

        'dog.logs': function(val) {
            let sum = 0
            for (s of val) sum += s
            this.dog.抓捕时间平均值 = Math.round(sum / val.length * 100) / 100
        }
    }

})

function getDistanceBetweenTwoPoints(x1, y1, x2, y2) {
    var a = x1 - x2;
    var b = y1 - y2;

    // c^2 = a^2 + b^2
    // a^2 = Math.pow(a, 2)
    // b^2 = Math.pow(b, 2)
    var result = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));

    return Math.round(result);
}